<!-- createBy timi -->
<template>
  <div class="workshop-chart common-tabs-wrapper">
    <!-- <iframe class="background" src="http://218.66.171.138:8888/dataScreenLh/#/index" title="车间总览"></iframe> -->
    <a-tabs :default-active-key="5" @change="changeFactory">
      <a-tab-pane :key="2" tab="二纺"> </a-tab-pane>
      <a-tab-pane :key="3" tab="三纺"> </a-tab-pane>
      <a-tab-pane :key="5" tab="五纺"> </a-tab-pane>
      <a-tab-pane :key="6" tab="六纺"> </a-tab-pane>
    </a-tabs>
    <div>
      <div>
        <component :is="workshopComponentName"></component>
      </div>
      <div>
        <Legend />
      </div>
    </div>
  </div>
</template>

<script>
import { MWebsocketMixin } from '@/mixins/MWebsocketMixin'
import TowWorkshop from './workshopPages/twoWorkshop'
import ThreeWorkshop from './workshopPages/threeWorkshop'
import FiveWorkshop from './workshopPages/fiveWorkshop'
import SixWorkshop from './workshopPages/sixWorkshop'
import Legend from './components/legend'
export default {
  mixins: [MWebsocketMixin],
  components: {
    TowWorkshop,
    ThreeWorkshop,
    FiveWorkshop,
    SixWorkshop,
    Legend
  },
  data() {
    return {
      selectedWorkshop: 5
    }
  },
  mounted() {},
  computed: {
    workshopComponentName() {
      switch (this.selectedWorkshop) {
        // 二纺
        case 2:
          return 'towWorkshop'
        // 三纺
        case 3:
          return 'threeWorkshop'
        // 五纺
        case 5:
          return 'fiveWorkshop'
        // 六纺
        case 6:
          return 'sixWorkshop'
        // 默认五纺
        default:
          return 'fiveWorkshop'
      }
    }
  },
  methods: {
    websocketOnmessage: function(e) {
      console.log('-----接收消息(处理后)-------', JSON.parse(e.data), new Date())
      let result = JSON.parse(e.data)
      //收到socket后存入所有信息
      this.$store.commit('updateSocketData', result)
      // console.log('socket数据',this.$store.state.socketData)
      // 之后根据当前查看车间存入当前信息
      this.$store.commit(
        'updateWorkshopData',
        this.$store.state.socketData.find(item => item.workshop == this.selectedWorkshop)
      )
      // 存入当前车间号
      this.$store.commit(
        'updateWorkshopNo',
        this.$store.state.socketData.find(item => item.workshop == this.selectedWorkshop).workshop
      )
    },
    changeFactory(key) {
      this.selectedWorkshop = key
      this.$store.commit(
        'updateWorkshopData',
        this.$store.state.socketData.find(item => item.workshop == this.selectedWorkshop)
      )
      this.$store.commit(
        'updateWorkshopNo',
        this.$store.state.socketData.find(item => item.workshop == this.selectedWorkshop).workshop
      )
      console.log('现在的数据为', this.selectedWorkshop, '车间', this.$store.state.workshopData)
    }
  }
}
</script>
<style>
.background {
  background-color: white;
  height: 100vh;
}
@import '~@/assets/less/workshop.less';
</style>
